<template>
  <div ref="waterFullRef" class="water-full-wrapper">
    <div v-for="(item, index) in waterList" :style="{ left: item.left + 'px', top: item.top + 'px', height: item.height + 'px', background: item.background }" class="item">
      {{ index + 1 }}
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
const props = defineProps<{
  list: any[]
}>()

const waterFullRef = ref()
onMounted(() => {
  init()
})
const waterList = reactive([])
const waterHeightList = reactive([])
const init = () => {
  const w = waterFullRef.value.clientWidth
  const columns = Math.floor(w / 130)

  for (let i = 0; i < props.list.length; i++) {
    if (i < columns) {
      props.list[i].left = i * 130;
      props.list[i].top = 20;
      waterList.push(props.list[i])
      waterHeightList.push(props.list[i].top + props.list[i].height)
    } else {
      let minH = waterHeightList[0]
      let index = 0
      waterHeightList.forEach((item, idx) => {
        if (minH > item) {
          minH = item
          index = idx
        }
      })
      props.list[i].left = index * 130;
      props.list[i].top = minH + 20;
      waterList.push(props.list[i])
      waterHeightList[index] = (props.list[i].top + props.list[i].height)
    }
  }
}
</script>
<style lang='scss' scoped>
.water-full-wrapper {
  position: relative;
  height: 100%;
  .item {
    position: absolute;
    width: 120px;
  }
}
</style>